<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Diff</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">

        class Diff extends React.Component {
            state = {
                persons: [
                    { id: 1, name: 'aaa', age: 12 },
                    { id: 2, name: 'bbb', age: 34 },
                    { id: 3, name: 'ccc', age: 23 },
                    { id: 4, name: 'ddd', age: 34 },
                ]
            }
            add = () => {
                const { persons } = this.state
                const person = { id: 5, name: 'fff', age: 24 }
                this.setState({
                    persons: [person, ...persons]
                })
            }
            render() {
                return <div>
                    <div>展示人员信息</div>
                    <button onClick={this.add}>添加一个小王</button>
                    <div>使用数组Index</div>
                    <ul>
                        {
                            this.state.persons.map((person, index) => {
                                return <li key={index}>{person.name}---{person.age} <input type="text" /></li>
                            })
                        }
                    </ul>

                    <div>使用数据唯一标识</div>
                    <ul>
                        {
                            this.state.persons.map((person) => {
                                return <li key={person.id}>{person.name}---{person.age} <input type="text" /></li>
                            })
                        }
                    </ul>
                </div>
            }

        }
        //2 渲染组件到页面 
        ReactDOM.render(<Diff />, document.getElementById('test'))

    </script>
</body>

</html>